<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图文块</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="header">
        <h1>图文快</h1>
        <p>单击元素可选中并调整大小，右键可编辑样式。双击内容可编辑文字。</p>
      </div>
      <div class="toolbar">
        <button class="tool-btn" id="addElementBtn">添加元素</button
        ><button class="tool-btn" id="singleArrowBtn">单箭头</button
        ><button class="tool-btn" id="doubleArrowBtn">双箭头</button
        ><button class="tool-btn" id="exportBtn">导入/导出/设置</button
        ><button class="tool-btn danger" id="clearCanvasBtn">清空画布</button>
      </div>
      <div class="drop-container" id="dropContainer"></div>
    </div>

    <div class="overlay" id="overlay"></div>
    <div class="panel" id="libraryPanel" style="max-width: 800px">
      <div class="panel-header">
        <h2>元素库</h2>
        <button class="close-btn">×</button>
      </div>
      <div id="libraryContent" style="max-height: 70vh; overflow-y: auto; padding: 10px"></div>
      <div class="panel-actions">
        <button class="tool-btn" id="createCustomShapeLinkBtn">创建新盒子形状</button>
      </div>
    </div>
    <div class="panel" id="customShapePanel">
      <div class="panel-header">
        <h2>创建自定义盒子</h2>
        <button class="close-btn">×</button>
      </div>
      <div class="form-group">
        <label for="customShapeName">形状名称</label
        ><input type="text" id="customShapeName" placeholder="例如：数据库" />
      </div>
      <div class="form-group">
        <label>多边形坐标点 (单位: %)</label
        ><textarea
          id="customShapePoints"
          rows="3"
          placeholder="50 0, 100 50, 50 100, 0 50"
        ></textarea>
      </div>
      <div class="panel-actions">
        <button class="tool-btn" id="saveAndCreateCustomShapeBtn">保存并创建</button>
      </div>
    </div>
    <div class="panel" id="exportPanel">
      <div class="panel-header">
        <h2>导入 / 导出 / 设置</h2>
        <button class="close-btn">×</button>
      </div>
      <div class="io-panel-content">
        <div class="storage-options">
          <fieldset>
            <legend>存储设置</legend>
            <div>
              <label
                ><input type="radio" name="storageType" value="localStorage" checked /> 本地存储
                (永久)</label
              ><label
                ><input type="radio" name="storageType" value="sessionStorage" /> 会话存储
                (临时)</label
              >
            </div>
          </fieldset>
        </div>
        <div class="io-actions">
          <button class="tool-btn" id="importJsonBtn">导入JSON</button
          ><button class="tool-btn" id="exportJsonBtn">导出为JSON</button
          ><button class="tool-btn" id="exportImageBtn">导出为图片</button>
        </div>
      </div>
    </div>
    <div class="panel" id="propertiesMenu" style="width: 260px">
      <div class="panel-header">
        <h4>编辑样式</h4>
        <button class="close-btn">×</button>
      </div>
      <div class="prop-item"><label>背景颜色</label><input type="color" id="propBgColor" /></div>
      <div class="prop-item" id="propBorderColorItem">
        <label>边框颜色</label><input type="color" id="propBorderColor" />
      </div>
      <div class="prop-item"><label>字体颜色</label><input type="color" id="propFontColor" /></div>
      <div class="prop-item">
        <label>字体大小 (px)</label><input type="number" id="propFontSize" min="8" max="72" />
      </div>
      <div class="panel-actions"><button class="tool-btn" id="applyPropsBtn">应用</button></div>
    </div>
  </body>
</html>
